<template>
  <div class="login-page">
    <div class="login-container">
      <div class="login-card">
        <div class="login-header">
          <h2>用户登录</h2>
          <p>欢迎回到 LetHear</p>
        </div>

        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
          size="large"
        >
          <el-form-item prop="usernameOrEmail">
            <el-input
              v-model="loginForm.usernameOrEmail"
              placeholder="用户名或邮箱"
              prefix-icon="User"
              clearable
            />
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="密码"
              prefix-icon="Lock"
              show-password
              clearable
            />
          </el-form-item>

          <el-form-item>
            <div class="form-options">
              <el-checkbox v-model="rememberMe">记住我</el-checkbox>
              <el-link type="primary" @click="$router.push('/forgot-password')">
                忘记密码？
              </el-link>
            </div>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" :loading="loading" @click="handleLogin" class="login-button">
              {{ loading ? "登录中..." : "登录" }}
            </el-button>
          </el-form-item>
        </el-form>

        <div class="login-footer">
          <span>还没有账号？</span>
          <el-link type="primary" @click="$router.push('/register')"> 立即注册 </el-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, FormInstance } from "element-plus";
import type { LoginRequest } from "@/types";

const store = useStore();
const router = useRouter();
const route = useRoute();

const loginFormRef = ref<FormInstance>();
const rememberMe = ref(false);

// 登录表单
const loginForm = reactive<LoginRequest>({
  usernameOrEmail: "",
  password: "",
  rememberMe: false,
});

// 表单验证规则
const loginRules = {
  usernameOrEmail: [
    { required: true, message: "请输入用户名或邮箱", trigger: "blur" },
    { min: 3, max: 50, message: "用户名或邮箱长度在 3 到 50 个字符", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 20, message: "密码长度在 6 到 20 个字符", trigger: "blur" },
  ],
};

// 加载状态
const loading = computed(() => store.getters["auth/loading"]);

// 处理登录
const handleLogin = async () => {
  if (!loginFormRef.value) return;

  try {
    // 验证表单
    await loginFormRef.value.validate();

    // 设置记住我状态
    loginForm.rememberMe = rememberMe.value;

    // 执行登录
    await store.dispatch("auth/login", loginForm);

    ElMessage.success("登录成功！");

    // 获取重定向地址
    const redirect = (route.query.redirect as string) || "/";
    router.push(redirect);
  } catch (error: unknown) {
    console.error("Login error:", error);

    if (error instanceof Error && error.message) {
      ElMessage.error(error.message);
    } else {
      ElMessage.error("登录失败，请检查用户名和密码");
    }
  }
};
</script>

<style scoped lang="scss">
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;

  .login-container {
    width: 100%;
    max-width: 400px;

    .login-card {
      background: white;
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      padding: 40px;

      .login-header {
        text-align: center;
        margin-bottom: 30px;

        h2 {
          color: #2c3e50;
          font-size: 28px;
          font-weight: 600;
          margin-bottom: 8px;
        }

        p {
          color: #606266;
          font-size: 14px;
        }
      }

      .login-form {
        .el-form-item {
          margin-bottom: 20px;
        }

        .form-options {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;

          .el-checkbox {
            color: #606266;
          }
        }

        .login-button {
          width: 100%;
          height: 44px;
          font-size: 16px;
          margin-top: 10px;
        }
      }

      .login-footer {
        text-align: center;
        margin-top: 30px;
        color: #606266;
        font-size: 14px;

        .el-link {
          margin-left: 5px;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 480px) {
  .login-page {
    padding: 10px;

    .login-container {
      .login-card {
        padding: 30px 20px;

        .login-header {
          h2 {
            font-size: 24px;
          }
        }
      }
    }
  }
}
</style>
